<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IM-Protobuf</title>
    <!--<link rel="icon" href="image/chat.png" type="image/x-icon">-->
    <link rel="stylesheet" href="css/default.css">
    <script src="lib/protobuf/long.js"></script>
    <script src="lib/protobuf/bytebuffer.js"></script>
    <script src="lib/protobuf/protobuf.js"></script>
    <script src="lib/vue/vue.js"></script>
    <script src="lib/talent/talent.js"></script>
    <script src="css/layui/layui.js"></script>
    <link rel="stylesheet" href="css/layui/css/layui.css">
    <script src="lib/html5.min.js"></script>
    <script src="lib/respond.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-blue">
        <div class="layui-main">
            <span id="headName">T-IO Protobuf</span>
            <ul id="options" class="layui-nav layui-layout-left" lay-filter="">
                <li class="layui-nav-item"><a href="">最新活动</a></li>
                <li class="layui-nav-item"><a href="">WebGIS</a></li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">t-io即时通信技术大牛</a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        <dd><a href="https://www.oschina.net/p/t-io" target="_blank">talent-tan文章</a></dd>
                        <dd><a href="https://git.oschina.net/kobe577590/im" target="_blank">二师兄demo</a></dd>
                        <dd><a href="image/t-io-api.png" target="_blank">t-io API示意图</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>
            <ul id="userOption" class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a onclick="alert('控制台')">控制台</a>
                    <!--<span class="layui-badge">9</span>-->
                </li>
                <li class="layui-nav-item">
                    <a onclick="alert('个人中心')">个人中心<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item" id="user">
                    <a><img src="image/header/1.jpg" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">修改信息</a></dd>
                        <dd><a href="javascript:;">安全管理</a></dd>
                        <dd><a onclick="">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" id="login">
                    <a onclick="register.open()">登录</a>
                </li>
            </ul>
        </div>

    </div>
    <div class="layui-side layui-bg-rgbaBlack">
        <span id="groupNumbers" v-text="'在线人数'+number"></span>
        <div id="members">
            <ul class="style-1 im_userlist_ol">
                <li v-for="chatRoomMember in chatRoomMembers" class="">
                    <span class="userlist_wap ">
                        <img src="">
                    </span>
                    <span class="userlist_other">
                        <span class="userlist_id">{{ chatRoomMember.userid }}</span>
                        <span class="userlist_attached">{{ chatRoomMember.userip.userip }}&nbsp;:{{ chatRoomMember.userip.port }}</span>
                    </span>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <div class="chat-all">
            <div class="ct-msg">
                <div id="chat" class="ct-container style-1">
                    <ul v-for="chatRespBody in chatRespBodys">

                        <li v-if="chatRespBody.fromNick!=chatRespBody.local" class="bounceInLeft">
                            <div class="ct-userinfo">
                                <img src="image/header/2.jpg">
                                <cite>
                                    <span>{{ chatRespBody.fromNick }}</span>
                                    <i> {{ chatRespBody.date }}</i>
                                </cite>
                            </div>
                            <div class="ct-text">
                                {{ chatRespBody.text }}
                            </div>
                        </li>

                        <li v-else-if="chatRespBody.fromNick==chatRespBody.local"
                            class="bounceInRight im_chat_content_mine">
                            <div class="ct-userinfo">
                                <img src="image/header/4.jpg">
                                <cite>
                                    <span>{{ chatRespBody.fromNick }}</span>
                                    <i> {{ chatRespBody.date }}</i>
                                </cite>
                            </div>
                            <div class="ct-text-mine">
                                {{ chatRespBody.text }}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-footer" style="padding: 0">
        <div class="send-msg">
            <input id='text' name='title' placeholder='输入内容后，按回车键发送，或者点“发送”按钮发送'
                   class='layui-input'
                   style="display: inline-block;float: left;width: calc(100% - 100px);height: 100%;">
            <button class="layui-btn layui-bg-blue "
                    style="display: inline-block;float: right;width: 100px;height: 100%;"
                    onclick="operate.prototype.sendMsg()">发送
            </button>
        </div>
    </div>
</div>

</body>
<script src="js/im.js"></script>
<script src="js/action.js"></script>

<script>
    //    window.onload = function () {
    //        login.connection();
    //    };

    layui.use('element', function () {
        var element = layui.element;
    });

    login.confirm();
</script>
</html>